import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-complex',
  templateUrl: './complex.component.html',
  styles: [
    `
      .custom .lv-timeline,
      .custom .lv-timeline-item {
        font-size: 16px;
      }

      .custom .lv-timeline-tiled .lv-timeline-item .lv-timeline-item-time,
      .custom .lv-timeline-tiled .lv-timeline-item .lv-timeline-item-content {
        padding-bottom: 0;
        height: 96px;
        vertical-align: top;
      }

      ::ng-deep .custom .lv-timeline-item-tail {
        border-left: 1px solid #3388ff;
      }

      ::ng-deep .custom .custom-error-timeline .lv-timeline-item-tail {
        border-left: 1px solid #f27272;
      }

      .custom-dot {
        display: block;
        width: 8px;
        height: 8px;
        margin: 5px 0;
        border-radius: 50%;
        background: #3388ff;
      }

      .custom-dot-error {
        background: #f27272;
      }

      .custom lv-timeline-item:last-of-type .custom-dot {
        width: 12px;
        height: 12px;
      }

      .custom-container {
        display: flex;
      }

      .custom-title {
        width: 200px;
      }

      .custom-content p {
        font-size: 14px;
        color: #808080;
      }

      .custom-content-error p {
        color: #f27272;
      }

      .custom-status span {
        padding-left: 8px;
        color: #808080;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ComplexComponent implements OnInit {
  data = [];

  ngOnInit() {
    this.data = [
      { time: new Date('2020-08-21'), title: '订单确认', content: { des: '小蓝创建了订单' } },
      {
        time: new Date('2020-08-21'),
        title: '分配',
        content: { des: '小红已将订单分配给了小绿，参与人有小绿' },
      },
      { time: new Date('2020-08-21'), title: '素材准备', content: { des: '小绿开始素材准备' } },
      { time: new Date('2020-08-21'), title: '制作中', content: { des: '小绿开始制作' } },
      {
        time: new Date('2020-08-24'),
        title: '制作完成',
        content: { des: '小红制作完成', link: '' },
      },
      {
        time: new Date('2020-08-24'),
        title: '客户评审不通过',
        content: {
          des: '小蓝不同意通过',
          status: [
            { des: '内部评审通过，--同意通过', pass: true },
            { des: '客户评审通过 ，小蓝不同意通过', pass: false },
          ],
        },
        type: 'error',
      },
      {
        time: new Date('2020-08-24'),
        title: '制作完成',
        content: { des: '小红制作完成', link: '' },
      },
      {
        time: new Date('2020-08-24'),
        title: '客户评审通过',
        content: {
          des: '小蓝',
          status: [
            { des: '内部评审通过，--同意通过', pass: true },
            { des: '客户评审通过 ，小蓝不同意通过', pass: true },
          ],
        },
      },
      {
        time: new Date('2020-08-24'),
        title: '已完成',
        content: { des: '', link: '' },
      },
    ];
  }
}
